<template>
    <div>
        <li class="todo-item">
            <div class="check-box">
                <input type="checkbox" :checked="data.completed === '0' ?false:true" @change="$emit('complete-item', data.id)" />
            </div>
            <span class="content"
                :style="{ 'textDecoration': data.completed === '1' ? 'line-through' : 'none' }">{{ data.content }}</span>
            <div class="btn-group">
                <button class="btn btn-primary" @click="$emit('open-check-modal', data.id)">查看</button>
                <button class="btn btn-warning" @click="$emit('open-edit-modal', data.id)">编辑</button>
                <button class="btn btn-danger" @click="$emit('remove-item', data.id)">删除</button>
            </div>
        </li>
    </div>
</template>

<script>
export default {
    name:'PlanItem',
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';

.todo-item {
    @include flex-row;
    align-items: center;
    height: .6rem;
    margin-bottom: .02rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;

    .check-box {
        @include vh-center;
        width: .5rem;
        height: .5rem;
    }

    .content {
        flex: 1;
        @include ellipsis;
        min-width: 0;
        font-size: .16rem;
    }

    .btn-group {
        @include flex-row;
        width: 1.7rem;

        .btn {
            display: block;
            margin-left: .1rem;
            padding: 0.05rem 0.1rem;
            color: #fff;
            font-size: .12rem;
            white-space: nowrap;
            border-radius: 4px;
            
            &.btn-primary{
                color: #fff;
                background-color: #79b733;
                border-color: #79b733;
            }

            &.btn-warning {
                color: #fff;
                background-color: #4e8cf0;
                border-color: #4e8cf0;
            }

            &.btn-danger {
                color: #fff;
                background-color: #d9534f;
                border-color: #d9534f;
            }
        }
    }
}
</style>